import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
} from "react";
import { Button, Form, Input } from "antd-mobile";

const Perfectmessage = (
  {
    btn,
    buffer,
  }: {
    btn: (key: "one" | "two" | "three") => void;
    buffer: any;
  },
  ref: any
) => {
  const [form] = Form.useForm();

  const echo = useMemo(
    () => ({
      name: buffer.name,
      hospital: buffer.hospital,
      department: buffer.department,
      position: buffer.position,
    }),
    [buffer.name, buffer.hospital, buffer.department, buffer.position]
  );

  useImperativeHandle(ref, () => {
    return {
      validateFields: form.validateFields,
    };
  });

  const next = () => {
    btn("two");
  };

  useEffect(() => {
    form.setFieldsValue(echo);
  }, [form, echo]);

  return (
    <div className="Perfectmessage">
      <Form form={form}>
        <Form.Item name={"name"}>
          <Input placeholder="您的真实姓名" />
        </Form.Item>
        <Form.Item name={"inauguralHospital"}>
          <Input placeholder="您所在的医院" />
        </Form.Item>
        <Form.Item name={"departmentId"}>
          <Input placeholder="您所在的科室" />
        </Form.Item>
        <Form.Item name={"jobTitleId"}>
          <Input placeholder="您所职位" />
        </Form.Item>
      </Form>
      <Button onClick={next}>下一步</Button>
    </div>
  );
};
export default forwardRef(Perfectmessage);
